<template>
  <div class="pixel-avatar" @click="handleClick">
    <div 
      class="avatar-shape"
      :style="{
        width: size + 'px',
        height: size + 'px',
        backgroundColor: backgroundColor
      }"
    >
      <div class="animal-svg" v-html="animalShape"></div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'PixelAvatar',
  props: {
    userId: {
      type: String,
      default: 'default'
    },
    size: {
      type: Number,
      default: 80
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    // 基于userId生成确定性的种子值
    const getSeed = (str) => {
      let hash = 0
      for (let i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash)
      }
      return Math.abs(hash)
    }

    // 动物类型数组
    const animals = [
      'cat', 'dog', 'rabbit', 'fox', 'panda',
      'bear', 'koala', 'tiger', 'lion', 'elephant'
    ]

    // 颜色数组
    const colors = [
      '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57',
      '#FF9FF3', '#54A0FF', '#5F27CD', '#00D2D3', '#FF9F43'
    ]

    // 基于userId选择动物和颜色
    const seed = getSeed(props.userId)
    const animalIndex = seed % animals.length
    const colorIndex = (seed * 7) % colors.length

    // 动物形状SVG代码
    const animalShapes = {
      cat: `
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <!-- 猫头 -->
          <circle cx="50" cy="45" r="25" fill="#FFF" stroke="#333" stroke-width="2"/>
          <!-- 眼睛 -->
          <circle cx="40" cy="38" r="5" fill="#333"/>
          <circle cx="60" cy="38" r="5" fill="#333"/>
          <circle cx="42" cy="38" r="2" fill="#FFF"/>
          <circle cx="62" cy="38" r="2" fill="#FFF"/>
          <!-- 鼻子 -->
          <path d="M50 48 L45 55 L55 55 Z" fill="#FF6B6B"/>
          <!-- 嘴巴 -->
          <path d="M50 55 Q50 60 45 60" fill="none" stroke="#333" stroke-width="1"/>
          <path d="M50 55 Q50 60 55 60" fill="none" stroke="#333" stroke-width="1"/>
          <!-- 耳朵 -->
          <polygon points="28,30 20,10 35,18" fill="#FFF" stroke="#333" stroke-width="2"/>
          <polygon points="72,30 80,10 65,18" fill="#FFF" stroke="#333" stroke-width="2"/>
        </svg>
      `,
      dog: `
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <!-- 狗头 -->
          <circle cx="50" cy="45" r="28" fill="#FFF" stroke="#333" stroke-width="2"/>
          <!-- 眼睛 -->
          <circle cx="40" cy="40" r="5" fill="#333"/>
          <circle cx="60" cy="40" r="5" fill="#333"/>
          <circle cx="42" cy="39" r="2" fill="#FFF"/>
          <circle cx="62" cy="39" r="2" fill="#FFF"/>
          <!-- 鼻子 -->
          <ellipse cx="50" cy="52" rx="8" ry="6" fill="#333"/>
          <!-- 嘴巴 -->
          <path d="M50 58 Q50 64 40 68" fill="none" stroke="#333" stroke-width="2"/>
          <path d="M50 58 Q50 64 60 68" fill="none" stroke="#333" stroke-width="2"/>
          <!-- 耳朵 -->
          <ellipse cx="28" cy="32" rx="5" ry="15" fill="#FFF" stroke="#333" stroke-width="2" transform="rotate(-30 28 32)"/>
          <ellipse cx="72" cy="32" rx="5" ry="15" fill="#FFF" stroke="#333" stroke-width="2" transform="rotate(30 72 32)"/>
        </svg>
      `,
      rabbit: `
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <!-- 兔子头 -->
          <circle cx="50" cy="50" r="25" fill="#FFF" stroke="#333" stroke-width="2"/>
          <!-- 眼睛 -->
          <circle cx="40" cy="45" r="4" fill="#333"/>
          <circle cx="60" cy="45" r="4" fill="#333"/>
          <circle cx="42" cy="44" r="1.5" fill="#FFF"/>
          <circle cx="62" cy="44" r="1.5" fill="#FFF"/>
          <!-- 鼻子 -->
          <circle cx="50" cy="55" r="3" fill="#FF6B6B"/>
          <!-- 嘴巴 -->
          <path d="M50 58 Q50 65 45 65" fill="none" stroke="#333" stroke-width="1"/>
          <path d="M50 58 Q50 65 55 65" fill="none" stroke="#333" stroke-width="1"/>
          <!-- 耳朵 -->
          <path d="M30,20 Q20,5 35,35" fill="none" stroke="#333" stroke-width="2"/>
          <path d="M30,20 Q25,5 35,35" fill="#FFF" stroke="#333" stroke-width="2"/>
          <path d="M70,20 Q80,5 65,35" fill="none" stroke="#333" stroke-width="2"/>
          <path d="M70,20 Q75,5 65,35" fill="#FFF" stroke="#333" stroke-width="2"/>
        </svg>
      `,
      panda: `
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <!-- 熊猫头 -->
          <circle cx="50" cy="50" r="30" fill="#FFF" stroke="#333" stroke-width="2"/>
          <!-- 眼睛区域 -->
          <circle cx="40" cy="40" r="10" fill="#333"/>
          <circle cx="60" cy="40" r="10" fill="#333"/>
          <!-- 眼睛 -->
          <circle cx="40" cy="40" r="5" fill="#FFF"/>
          <circle cx="60" cy="40" r="5" fill="#FFF"/>
          <circle cx="41" cy="39" r="2" fill="#333"/>
          <circle cx="61" cy="39" r="2" fill="#333"/>
          <!-- 鼻子 -->
          <circle cx="50" cy="55" r="5" fill="#333"/>
          <!-- 嘴巴 -->
          <path d="M50 60 Q50 70 40 70" fill="none" stroke="#333" stroke-width="2"/>
          <path d="M50 60 Q50 70 60 70" fill="none" stroke="#333" stroke-width="2"/>
          <!-- 耳朵 -->
          <circle cx="30" cy="30" r="8" fill="#333"/>
          <circle cx="70" cy="30" r="8" fill="#333"/>
        </svg>
      `,
      bear: `
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <!-- 熊头 -->
          <circle cx="50" cy="55" r="30" fill="#8B4513" stroke="#333" stroke-width="2"/>
          <!-- 眼睛 -->
          <circle cx="40" cy="45" r="4" fill="#FFF" stroke="#333" stroke-width="1"/>
          <circle cx="60" cy="45" r="4" fill="#FFF" stroke="#333" stroke-width="1"/>
          <circle cx="40" cy="45" r="2" fill="#333"/>
          <circle cx="60" cy="45" r="2" fill="#333"/>
          <!-- 鼻子 -->
          <ellipse cx="50" cy="58" rx="10" ry="6" fill="#333"/>
          <!-- 嘴巴 -->
          <path d="M50 64 Q50 68 40 70" fill="none" stroke="#FFF" stroke-width="2"/>
          <path d="M50 64 Q50 68 60 70" fill="none" stroke="#FFF" stroke-width="2"/>
          <!-- 耳朵 -->
          <ellipse cx="30" cy="40" rx="8" ry="10" fill="#8B4513" stroke="#333" stroke-width="2"/>
          <ellipse cx="70" cy="40" rx="8" ry="10" fill="#8B4513" stroke="#333" stroke-width="2"/>
        </svg>
      `,
      fox: `
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <!-- 狐狸头 -->
          <circle cx="50" cy="45" r="25" fill="#FF8C00" stroke="#333" stroke-width="2"/>
          <!-- 眼睛 -->
          <circle cx="40" cy="38" r="4" fill="#333"/>
          <circle cx="60" cy="38" r="4" fill="#333"/>
          <circle cx="42" cy="37" r="1.5" fill="#FFF"/>
          <circle cx="62" cy="37" r="1.5" fill="#FFF"/>
          <!-- 鼻子 -->
          <ellipse cx="50" cy="48" rx="5" ry="4" fill="#333"/>
          <!-- 嘴巴 -->
          <path d="M50 52 Q50 56 45 58" fill="none" stroke="#333" stroke-width="1.5"/>
          <path d="M50 52 Q50 56 55 58" fill="none" stroke="#333" stroke-width="1.5"/>
          <!-- 耳朵 -->
          <polygon points="30,30 22,15 35,22" fill="#FF8C00" stroke="#333" stroke-width="2"/>
          <polygon points="70,30 78,15 65,22" fill="#FF8C00" stroke="#333" stroke-width="2"/>
          <!-- 狐狸特有的面部特征 -->
          <path d="M35 50 Q30 55 35 60" fill="none" stroke="#FF6347" stroke-width="1.5"/>
          <path d="M65 50 Q70 55 65 60" fill="none" stroke="#FF6347" stroke-width="1.5"/>
        </svg>
      `,
      koala: `
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <!-- 考拉头 -->
          <circle cx="50" cy="50" r="28" fill="#8B4513" stroke="#333" stroke-width="2"/>
          <!-- 脸部 -->
          <circle cx="50" cy="55" r="20" fill="#FFF" stroke="#333" stroke-width="2"/>
          <!-- 眼睛 -->
          <circle cx="40" cy="45" r="6" fill="#333"/>
          <circle cx="60" cy="45" r="6" fill="#333"/>
          <circle cx="41" cy="44" r="2" fill="#FFF"/>
          <circle cx="61" cy="44" r="2" fill="#FFF"/>
          <!-- 鼻子 -->
          <circle cx="50" cy="58" r="6" fill="#333"/>
          <!-- 嘴巴 -->
          <path d="M50 64 Q50 68 45 70" fill="none" stroke="#333" stroke-width="2"/>
          <path d="M50 64 Q50 68 55 70" fill="none" stroke="#333" stroke-width="2"/>
          <!-- 耳朵 -->
          <ellipse cx="30" cy="35" rx="10" ry="12" fill="#8B4513" stroke="#333" stroke-width="2"/>
          <ellipse cx="70" cy="35" rx="10" ry="12" fill="#8B4513" stroke="#333" stroke-width="2"/>
          <!-- 耳朵内部 -->
          <ellipse cx="30" cy="35" rx="6" ry="8" fill="#FFF"/>
          <ellipse cx="70" cy="35" rx="6" ry="8" fill="#FFF"/>
        </svg>
      `,
      tiger: `
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <!-- 老虎头 -->
          <circle cx="50" cy="48" r="30" fill="#F4A460" stroke="#333" stroke-width="2"/>
          <!-- 眼睛 -->
          <circle cx="40" cy="40" r="5" fill="#FFF" stroke="#333" stroke-width="1.5"/>
          <circle cx="60" cy="40" r="5" fill="#FFF" stroke="#333" stroke-width="1.5"/>
          <circle cx="40" cy="40" r="2.5" fill="#333"/>
          <circle cx="60" cy="40" r="2.5" fill="#333"/>
          <!-- 鼻子 -->
          <ellipse cx="50" cy="52" rx="7" ry="5" fill="#333"/>
          <!-- 嘴巴 -->
          <path d="M50 57 Q50 63 40 68" fill="none" stroke="#333" stroke-width="2"/>
          <path d="M50 57 Q50 63 60 68" fill="none" stroke="#333" stroke-width="2"/>
          <!-- 耳朵 -->
          <polygon points="30,30 25,15 40,20" fill="#F4A460" stroke="#333" stroke-width="2"/>
          <polygon points="70,30 75,15 60,20" fill="#F4A460" stroke="#333" stroke-width="2"/>
          <!-- 老虎斑纹 -->
          <path d="M25 45 Q35 40 30 50" fill="none" stroke="#8B4513" stroke-width="2"/>
          <path d="M75 45 Q65 40 70 50" fill="none" stroke="#8B4513" stroke-width="2"/>
          <path d="M30 70 Q40 65 45 70" fill="none" stroke="#8B4513" stroke-width="2"/>
          <path d="M70 70 Q60 65 55 70" fill="none" stroke="#8B4513" stroke-width="2"/>
        </svg>
      `,
      lion: `
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <!-- 狮子头 -->
          <circle cx="50" cy="50" r="32" fill="#FFF3CD" stroke="#333" stroke-width="2"/>
          <!-- 脸部 -->
          <circle cx="50" cy="52" r="22" fill="#FFD700" stroke="#333" stroke-width="2"/>
          <!-- 眼睛 -->
          <circle cx="40" cy="45" r="5" fill="#333"/>
          <circle cx="60" cy="45" r="5" fill="#333"/>
          <circle cx="42" cy="44" r="2" fill="#FFF"/>
          <circle cx="62" cy="44" r="2" fill="#FFF"/>
          <!-- 鼻子 -->
          <ellipse cx="50" cy="55" rx="7" ry="5" fill="#333"/>
          <!-- 嘴巴 -->
          <path d="M50 60 Q50 65 40 70" fill="none" stroke="#333" stroke-width="2"/>
          <path d="M50 60 Q50 65 60 70" fill="none" stroke="#333" stroke-width="2"/>
          <!-- 耳朵 -->
          <ellipse cx="30" cy="40" rx="8" ry="10" fill="#FFD700" stroke="#333" stroke-width="2"/>
          <ellipse cx="70" cy="40" rx="8" ry="10" fill="#FFD700" stroke="#333" stroke-width="2"/>
          <!-- 狮子鬃毛 -->
          <path d="M18 50 Q15 35 25 25 Q35 18 50 18 Q65 18 75 25 Q85 35 82 50" fill="none" stroke="#FFF3CD" stroke-width="6"/>
          <path d="M20 55 Q15 45 20 35 Q25 25 35 25 Q45 20 50 20 Q55 20 65 25 Q75 25 80 35 Q85 45 80 55" fill="none" stroke="#FFF3CD" stroke-width="6"/>
        </svg>
      `,
      elephant: `
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <!-- 大象头 -->
          <circle cx="50" cy="50" r="28" fill="#E0E0E0" stroke="#333" stroke-width="2"/>
          <!-- 眼睛 -->
          <circle cx="40" cy="42" r="4" fill="#333"/>
          <circle cx="60" cy="42" r="4" fill="#333"/>
          <circle cx="42" cy="41" r="1.5" fill="#FFF"/>
          <circle cx="62" cy="41" r="1.5" fill="#FFF"/>
          <!-- 鼻子 -->
          <path d="M50 70 Q45 85 60 85" fill="#E0E0E0" stroke="#333" stroke-width="2"/>
          <!-- 象牙 -->
          <path d="M43 70 L35 80" fill="none" stroke="#FFF" stroke-width="4" stroke-linecap="round"/>
          <path d="M57 70 L65 80" fill="none" stroke="#FFF" stroke-width="4" stroke-linecap="round"/>
          <!-- 耳朵 -->
          <path d="M25 50 Q20 30 30 45 Q40 60 25 50" fill="#E0E0E0" stroke="#333" stroke-width="2"/>
          <path d="M75 50 Q80 30 70 45 Q60 60 75 50" fill="#E0E0E0" stroke="#333" stroke-width="2"/>
          <!-- 大象特有特征 -->
          <circle cx="50" cy="35" r="3" fill="#333"/>
          <line x1="47" y1="35" x2="42" y2="33" stroke="#333" stroke-width="1"/>
          <line x1="53" y1="35" x2="58" y2="33" stroke="#333" stroke-width="1"/>
        </svg>
      `
    }

    // 如果没有对应的动物SVG，使用默认的动物图标
    const getAnimalShape = () => {
      const selectedAnimal = animals[animalIndex]
      return animalShapes[selectedAnimal] || animalShapes.dog
    }

    const handleClick = () => {
      emit('click')
    }

    // 计算属性
    const backgroundColor = computed(() => colors[colorIndex])
    const animalShape = computed(() => getAnimalShape())

    return {
      backgroundColor,
      animalShape,
      handleClick
    }
  }
}
</script>

<style scoped>
.pixel-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.pixel-avatar:hover {
  transform: scale(1.05);
}

.avatar-shape {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.avatar-shape:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.animal-svg {
  width: 80%;
  height: 80%;
  animation: fadeIn 0.5s ease-out;
}

.animal-svg svg {
  width: 100%;
  height: 100%;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .avatar-shape {
    border-width: 1px;
  }
  
  .animal-svg {
    width: 85%;
    height: 85%;
  }
}
</style>